<template>
	<view>
		<view class="container">
			<cu-custom bgColor="bg-1a1a1a" :isBack="true">
				<block slot="backText"></block>
				<block slot="content"><!-- 摄影师资料 --></block>
			</cu-custom>

			<view class="picBox">
				<view class="cu-bar">
					<view class="action sub-title justify-between">
						<text class="text-xl text-bold text-white">摄影师精选作品</text>
						<text class="text-ABC text-white">selected</text>
						<!-- last-child选择器-->
					</view>
					<view class="action text-white text-sm" style="opacity: 0.6;">
						2022-02-29 更新
					</view>
				</view>

				<view class="picMain flex justify-between">
					<view class="picL">
						<image src="https://www.zhoukaiwen.com/img/qh/wxt1.jpg" mode="aspectFill"></image>
					</view>
					<view class="picB">
						<image src="https://www.zhoukaiwen.com/img/qh/kw1.jpg" mode="aspectFill"></image>
						<image src="https://www.zhoukaiwen.com/img/qh/kw2.jpg" mode="aspectFill"></image>
					</view>
				</view>
			</view>


		</view>

		<view class="classify" style="margin: 10px 0;">
			<scroll-view scroll-x="true" class="scrollView">
				<view v-for="(a,index) in navigation" :key="index"
					:class="{ 'scrollItem': true, 'active': activeIndex === a.id }" @click="handleClick(a.id)"
					style="margin-left: 30px;">
					{{a.name}}
				</view>
			</scroll-view>
		</view>


		<view class="" v-for="(item,index) in recordList" :key="item.id">
			<record @click="gotoComment()" :record="item"></record>
		</view>
		
	</view>

</template>

<script>
	import record from './components/record.vue'

	export default {
		data() {
			return {
				activeIndex: 6,
				navigation: [],
				recordList:[],
				pages:0,
				pageForm:{
					current:1,
					size:3,
					categoryId: this.activeIndex
				}
		
			}
		},
		components: {
			record
		},
		methods: {
			handleClick(index) {
				console.log(index);
				this.activeIndex = index;
				this.pageRecordsList(false)
				
			},
			async getNavigation() {
				const result = await this.$u.api.getSquareNavigation()

				this.navigation = result


			},
			async pageRecordsList(flag){
				//flag为true表示触底
				if(flag){
					if(this.pages >= this.current || this.pages===0){
						
						this.pageForm.current++
						const result = await this.$u.api.getPageSquareRecords(this.pageForm)
						
						this.recordList= this.recordList.concat(result.records);
							
						this.pages = result.pages
					}else{
						console.log("最底层了");
					}
			
				}else{
					this.pageForm.categoryId = this.activeIndex
					const result = await this.$u.api.getPageSquareRecords(this.pageForm)
					this.recordList = [...result.records];
				}
						
				
			}
		},
		

		created() {
			this.getNavigation()
			this.pageRecordsList(false)
		}
	}
</script>

<style lang="scss" scoped>
	.picBox {
		width: 750rpx;
		background-color: #1a1a1a;

		.picMain {
			width: 750rpx;
			height: 380rpx;
			padding: 10rpx 30rpx 30rpx 30rpx;

			.picL {
				width: 430rpx;
				height: 100%;

				image {
					border-radius: 8rpx;
					width: 100%;
					height: 100%;
				}
			}

			.picB {
				width: 250rpx;
				height: 100%;
				display: flex;
				flex-flow: column; //垂直排列
				justify-content: space-between; //两端对齐

				image {
					border-radius: 8rpx;
					width: 100%;
					height: 48%;
				}
			}
		}
	}

	.classify {
		display: flex;

		.scrollView {
			width: 100%;
			white-space: nowrap;

			.scrollItem {
				display: inline-block;
				margin-left: 20px;

				p {
					margin-left: 5px;
				}


			}
		}
	}

	.active {
		font-size: large;
		font-weight: bold;
	}
</style>